<template>
<div>
	<h3 class="base-title">按钮样式</h3>
	<p class="base-content">按钮样式的多选组合。</p>

	<div class="demo-block" :class="{'show-case-core':caseObj1.showCoreFlag}">
		<div class="demo-block-source">
			<bh-checkbox-group v-model="checkboxGroup1" :min="1" :max='3'>
				<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
				<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
				<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
				<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
			</bh-checkbox-group>
			<bh-checkbox-group v-model="checkboxGroup2" size="medium">
				<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
				<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
				<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
				<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
			</bh-checkbox-group>
			<bh-checkbox-group v-model="checkboxGroup3" size="small">
				<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
				<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
				<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
				<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
			</bh-checkbox-group>
			<bh-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
				<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
				<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
				<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
				<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
			</bh-checkbox-group>
		</div>
		<div class="demo-block-core">
			<div class="demo-block-intro">只需要把bh-checkbox元素替换为bh-checkbox-button元素即可。此外，ygbh 还提供了size属性。</div>
			<textarea class="demo-core-box" readonly="readonly" v-model="caseSourceVal" style='height: 560px;'></textarea>
		</div>
		<div class="demo-block-footer">
			<div class="demo-ms-arr" @click='toggleDemoCore(caseObj1)'>
				<span class="demo-ms-s">显示代码</span>
				<span class="demo-ms-h">隐藏代码</span>
			</div>
			<a :href="caseObj1.coreUrl" target="_blank" class="demo-online" title="前往 codepen.io 运行此示例">在线运行</a>
		</div>
	</div>
</div>
</template>

<script>
const caseSourceVal = `
<bh-checkbox-group v-model="checkboxGroup1" :min="1" :max='3'>
	<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
	<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
	<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
	<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
</bh-checkbox-group>
<bh-checkbox-group v-model="checkboxGroup2" size="medium">
	<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
	<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
	<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
	<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
</bh-checkbox-group>
<bh-checkbox-group v-model="checkboxGroup3" size="small">
	<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
	<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
	<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
	<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
</bh-checkbox-group>
<bh-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
	<bh-checkbox-button label="上海" key="上海">上海</bh-checkbox-button>
	<bh-checkbox-button label="北京" key="北京">北京</bh-checkbox-button>
	<bh-checkbox-button label="广州" key="广州">广州</bh-checkbox-button>
	<bh-checkbox-button label="深圳" key="深圳">深圳</bh-checkbox-button>
</bh-checkbox-group>


export default {
	data() {
		return {
			checkboxGroup1: ['上海'],
			checkboxGroup2: ['上海'],
			checkboxGroup3: ['上海'],
			checkboxGroup4: ['上海'],
		};
	},
};
`;
export default {
	data () {
		return {
			caseObj1: {
				showCoreFlag: false,
				coreUrl: 'https://codepen.io/xiebaolin/pen/zYdxLdm',
			},
			caseSourceVal: caseSourceVal,

			checkboxGroup1: ['上海'],
			checkboxGroup2: [],
			checkboxGroup3: ['上海'],
			checkboxGroup4: ['上海'],
		};
	},
	methods: {
		// 切换代码显隐
		toggleDemoCore (item) {
			item.showCoreFlag = !item.showCoreFlag;
		},

		change1(val) {
			console.log('checked1', val);
		},
		change2(val) {
			console.log('checked2', val);
		},
	},
}
</script>

<style scoped>
.bh-checkbox-group{ margin-bottom: 20px; }
</style>
